<template>
  <div class="address-box">
    <Title title="房源管理" />
    <div class="search-box">
      <!-- 搜索 -->
      <div class="search-items">
        <div class="search-item">
          <p>楼盘名称：</p>
          <el-input v-model="searchData.name" />
        </div>
        <div class="search-item">
          <p>所属区域：</p>
          <el-input v-model="searchData.area" />
        </div>
        <div class="search-item">
          <p>价格：</p>
          <el-input v-model="searchData.price" />
        </div>
        <div class="search-item">
          <p>状态：</p>
          <el-select v-model="searchData.status" placeholder="请选择">
            <el-option label="开盘" :value="true" />
            <el-option label="未开盘" :value="false" />
          </el-select>
        </div>
      </div>

      <div class="btns">
        <el-button @click="search">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>

    <el-button @click="addItem"> 添加 </el-button>

    <MyTable
      :tableData="houseList"
      :tablecClumn="tablecClumn"
      :page="pages"
      @deleteItem="deleteItem"
      @editItem="editItem"
      @currentChange="currentChange"
    />

    <!-- 引入编辑/添加弹框 -->
    <MyDialog :visible="visible" @editOk="editOk" @close="changeDialogIsShow">
      <template slot="subTitle">{{ dialogTitle }}</template>
      <template slot="body">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="楼盘名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="所属区域">
            <el-input v-model="form.area"></el-input>
          </el-form-item>

          <el-form-item label="价格">
            <el-input v-model="form.price"></el-input>
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="form.status" placeholder="请选择状态">
              <el-option label="开盘" :value="true"></el-option>
              <el-option label="未开盘" :value="false"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
    </MyDialog>
  </div>
</template>
<script>
import Title from "@/components/Title.vue";
import MyTable from "@/components/MyTable.vue";
import { mapState, mapActions, mapMutations } from "vuex";
import MyDialog from "@/components/Dialog.vue";
export default {
  components: {
    Title,
    MyTable,
    MyDialog,
  },
  data() {
    return {
      tablecClumn: [
        {
          prop: "name",
          label: "楼盘名称",
          width: "200",
        },
        {
          prop: "area",
          label: "所属区域",
          width: "300",
        },
        {
          prop: "price",
          label: "价格",
        },
        {
          prop: "status",
          label: "状态",
        },
      ],
      visible: false,
      form: {},
      dialogTitle: "添加",
    };
  },
  computed: {
    ...mapState(["houseList", "pages", "searchData"]),
  },
  created() {
    this.getHouseList();
  },
  methods: {
    ...mapActions([
      "getHouseList",
      "deleteItem",
      "editStoreOk",
      "addStoreItem",
    ]),
    ...mapMutations(['CHANGE_SEARCH']),
    onSubmit() {
      console.log("submit!");
    },
    editItem(row) {
      // 将弹框打开
      this.changeDialogIsShow();

      this.dialogTitle = "编辑";

      // 给表单添加默认值
      this.form = { ...row };
    },
    changeDialogIsShow() {
      // 清空弹框数据
      this.form = {};

      this.visible = !this.visible;
    },
    editOk() {
      // 判断是编辑还是添加，如果数据中有id 说明是编辑，如果没有id 说明是添加
      if (this.form.id) {
        // 编辑
        this.editStoreOk(this.form);
      } else {
        this.addStoreItem(this.form);
      }

      this.changeDialogIsShow();
    },
    addItem() {
      this.dialogTitle = "添加";

      this.changeDialogIsShow();
    },
    // 切换页码
    currentChange(e) {
      this.getHouseList({
        ...this.pages,
        ...this.searchData,
        current: e,
      });
    },
    // 搜索
    search() {
      this.getHouseList();
    },
    // 重置
    reset() {
      this.CHANGE_SEARCH()

      this.search()
    }
  },
};
</script>

<style lang="scss" scoped>
.search-box {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.search-items {
  width: 100%;
  display: flex;
}
.search-item {
  flex: 1;
}
.btns {
  padding: 10px 0;
}
</style>
